import React, { useEffect, useState } from "react";
import { Button, Table, message, Popconfirm } from "antd";
import axios from "axios";
import AddModal from "./AddModal";
import RecordModal from "./RecordModal";
import InfoModal from "./InfoModal";
import "./index.css";
export default function FormApp() {
  const [visible, setVisible] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [tableDataList, setTableDataList] = useState([]);
  const [recodeData, setRecodeData] = useState(null);
  const [infoModal, setInfoModal] = useState(false);
  const [infoRecode, setInfoRecode] = useState(null);
  const [pageSize, setPageSize] = useState(10);
  const [pageNum, setPageNum] = useState(1);
  const [total, setTotal] = useState("");
  useEffect(() => {
    getList();
  }, [pageNum, total]);
  const getList = () => {
    axios({
      url: `http://192.168.200.129:8081/wordTemplate/listTemplate?pageSize=${pageSize}&pageNum=${pageNum}`,
      timeout: 30000,
    })
      .then((res) => {
        if (res.data.code === 200) {
          setTableDataList(res.data.data);
          setTotal(res.data.total);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  const deleteBtn = (recode) => {
    console.log("recode", recode);
    axios({
      method: "delete",
      url: `http://192.168.200.129:8081/wordTemplate/delTemplate/${recode.id}`,
      timeout: 30000,
    })
      .then((res) => {
        if (res.data.code === 200) {
          message.success("删除成功");
          getList();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  const columns = [
    {
      title: "模板名称",
      dataIndex: "name",
      key: "name",
      align: "center",
    },
    {
      title: "分类",
      dataIndex: "cate",
      key: "name",
      align: "center",
    },
    {
      title: "编号",
      dataIndex: "no",
      key: "no",
      align: "center",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "operate",
      key: "operate",
      align: "center",
      render: (text, recode) => {
        return (
          <>
            <Button
              type="primary"
              style={{ margin: "10px" }}
              onClick={(e) => {
                recodeModalHandle(recode);
              }}
            >
              新增记录
            </Button>
            <Button
              type="primary"
              onClick={(e) => {
                btbnClickInfo(recode);
              }}
            >
              查看记录
            </Button>
            <Popconfirm
              description="你确定要删除这个任务?"
              onConfirm={(e) => {
                deleteBtn(recode);
              }}
              okText="Yes"
              cancelText="No"
            >
              <Button type="primary" style={{ margin: "10px" }}>
                删除
              </Button>
            </Popconfirm>
          </>
        );
      },
    },
  ];
  const AddModalHandle = () => {
    setVisible(true);
  };
  const handleCancel = () => {
    setVisible(false);
  };

  //新增记录
  const handleRecodeCancel = () => {
    setIsModalOpen(false);
  };
  const recodeModalHandle = (recode) => {
    setRecodeData(recode);
    setIsModalOpen(true);
  };
  //查看记录
  const handleInfoCancel = () => {
    setInfoModal(false);
  };
  const btbnClickInfo = (recode) => {
    setInfoRecode(recode);
    setInfoModal(true);
  };
  const paginationProps = {
    current: pageNum, //当前页码
    pageSize, // 每页数据条数
    showTotal: () => <span>总共{total}项</span>,
    total, // 总条数
    onChange: (page) => actionPageNum(page), //改变页码的函数
    hideOnSinglePage: false,
    showSizeChanger: false,
  };
  const actionPageNum = (page) => {
    console.log("page", page);
    setPageNum(page);
  };
  return (
    <div>
      <h2 style={{ textAlign: "center" }}>苏州轨道文档库</h2>
      <Button
        type="primary"
        onClick={AddModalHandle}
        style={{ margin: "20px" }}
      >
        添加模板
      </Button>
      <Table
        dataSource={tableDataList}
        columns={columns}
        pagination={paginationProps}
        rowKey="id"
      ></Table>
      {visible && (
        <AddModal
          visible={visible}
          handleCancel={handleCancel}
          getList={getList}
        />
      )}
      {isModalOpen && (
        <RecordModal
          isModalOpen={isModalOpen}
          handleRecodeCancel={handleRecodeCancel}
          recodeData={recodeData}
        />
      )}

      {infoModal && (
        <InfoModal
          infoModal={infoModal}
          handleInfoCancel={handleInfoCancel}
          infoRecode={infoRecode}
        />
      )}
    </div>
  );
}
